<template>
	<div class="chart-pane-pie">
		<!-- 媒体来源占比-tops -->
		<div id="CustomizedPie"></div>
	</div>
</template>
<script>
var echarts = require('echarts');
export default{
	name:'CustomizedPie',
	data(){
		return {
			msg:''
		}
	},
	computed: {
        name(){
            return this.$route.path
        }
    },
    mounted(){
    	var that = this;
    	that.getCustomizedPie();
    },
	methods:{
		getCustomizedPie(){
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('CustomizedPie'));
			// 绘制图表
			myChart.setOption({
			    tooltip : {
			        trigger: 'item',
			        formatter: "{a} <br/>{b} : {d}%"
			    },
			    legend: {
			        data:[
			        	{
			        		name:'微信',
			        		icon:'circle'
			        	},
			        	{
			        		name:'微博',
			        		icon:'circle'
			        	},
			        	{
			        		name:'网站',
			        		icon:'circle'
			        	}
			        ],
			        x : 'center',
			        y : 'bottom',			        
			        textStyle:{
			        	color:'#ffffff'
			        }
			    },
			    visualMap: {
			        show: false,
			        min: 80,
			        max: 600,
			        inRange: {
			            colorLightness: [0, 1]
			        }
			    },
			    series : [
			        {
			            name:'媒体来源占比',
			            type:'pie',
			            radius : '55%',
			            center: ['50%', '50%'],
			            data:[
			                {
			                	value:430, 
			                	name:'微信',
			                	itemStyle:{
			                		color:'#0c81fe'
			                	}
			            	},
			                {
			                	value:240, 
			                	name:'微博',
			                	itemStyle:{
			                		color:'#44f0e9'
			                	}
			                },
			                {
			                	value:330,
			                	name:'网站',			                	
			                	itemStyle:{
			                		color:'#ce301a'
			                	}
			                }
			            ].sort(function (a, b) { return a.value - b.value; }),
			            roseType: 'radius',
			            label: {
			                normal: {
			                    textStyle: {
			                        color: '#ffffff'
			                    }
			                }
			            },
			            labelLine: {
			                normal: {
			                    lineStyle: {
			                        color: '#ffffff'
			                    },
			                    smooth: 0.2,
			                    length: 10,
			                    length2: 20
			                }
			            },
			            itemStyle: {
			                normal: {
			                    color: '#c23531',
			                    shadowBlur: 200,
			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			            },

			            animationType: 'scale',
			            animationEasing: 'elasticOut',
			            animationDelay: function (idx) {
			                return Math.random() * 200;
			            }
			        }
			    ],
			    color:['#ffffff'],
			    textStyle:{
			    	color:'#ffffff'
			    }

			});
		}
	}
}
</script>
<style rel="stylesheet/less" lang="less" >
#CustomizedPie{
	width:400px;
	height: 300px;
	margin: 0 auto;
}
</style>